import styleText from "data-text:./style.module.less"
import type { PlasmoCSConfig } from "plasmo"
import { useState } from "react"

import { useStorage } from "@plasmohq/storage/hook"

import * as style from "./style.module.less"

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = styleText
  return style
}

function IndexPopup() {
  const [checked, setChecked] = useStorage("checked", true)

  const handleInput = (val) => {
    // console.log(chrome.storage.sync.get("checked"))
    console.log(chrome)
    setChecked(val.target.checked)
  }

  return (
    <div
      style={{
        padding: 16
      }}>
      chrome-test
      <div className={style.option}>
        <span className={style.name}>url直接跳转开启：</span>
        <label className={style.switch}>
          <input
            type="checkbox"
            id={style.switch}
            checked={checked}
            onChange={handleInput}
          />
          <span className={`${style.slider} ${style.round}`}></span>
        </label>
      </div>
    </div>
  )
}

export default IndexPopup
